<template>
    <div class="audit_detail">
        <div class="content_panel">
            <detail-nav
                :active-menu="activeMenu"
                @click="scrollTo">
            </detail-nav>

            <div @scroll="scrollEvent" ref="panelList" class="panel_list" width="80%">
                <!--个人信息-->
                <personal-info
                    :user-data="data.personalInfo"
                    ref="personalInfo"
                    :isCalling="isCalling"
                    @call="OnDailout"
                    @end="OnHungUp"
                    @refresh="getUserInfo">
                </personal-info>

                <!--材料信息-->
                <other-info
                        :user-data="data.otherInfo"
                        :user-bioassay-info="data.userBioassayInfo"
                        ref="otherInfo"
                        :user-id="userId"
                        @isAuditing="updateAudit"
                        :order-nid="orderId">
                </other-info>

                <!--工作信息-->
                <work-student
                    :user-data="data.workStudentInfo"
                    ref="workStudent"
                    :isCalling="isCalling"
                    :is-auditing="isAuditing"
                    @updateData="getUserInfo"
                    @call="OnDailout"
                    @end="OnHungUp">
                </work-student>

                <!--联系人信息-->
                <contacts-info
                    :user-data="data.contactsInfo"
                    :user-id="userId"
                    :order-id="orderId"
                    ref="contactsInfo"
                    :isCalling="isCalling"
                    @call="OnDailout"
                    @end="OnHungUp">
                </contacts-info>

                <!--历史借款信息-->
                <loan-history
                    :user-id="userId"
                    ref="loanHistory">
                </loan-history>

                <!--用户修改记录-->
                <!--<modify-records-->
                    <!--ref="modifyRecord">-->
                <!--</modify-records>-->
            </div>
            <!--照会记录/信审备注/信审结论-->
            <div class="placeholder" v-if="orderId && orderId !== 'null'" :style="{height: hideTables ? '44px' : '212px'}">
                <div :style="{top: showTables && !hideTables ? '-200px' : '0'}" class="tables">
                    <ul class="tabs">
                        <li>
                            <a @click="tabName = 'tvRecords'" :class="{'active': tabName === 'tvRecords'}" href="javascript:void(0);">{{$t('audit.xsZhRecord')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'auditMarks'" :class="{'active': tabName === 'auditMarks'}" href="javascript:void(0);">{{$t('audit.auditRemark')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li>
                            <a @click="tabName = 'ocCode'" :class="{'active': tabName === 'ocCode'}" href="javascript:void(0);">{{$t('audit.OCCode')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <!--<li>-->
                            <!--<a @click="tabName = 'auditSpcCode'" :class="{'active': tabName === 'auditSpcCode'}" href="javascript:void(0);">{{$t('audit.spcCode')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>-->
                        <!--</li>-->
                        <li>
                            <a @click="tabName = 'auditRecords'" :class="{'active': tabName === 'auditRecords'}" href="javascript:void(0);">{{$t('audit.auditConclusion')}}<i class="detail_menu_icon el-icon-caret-top"></i></a>
                        </li>
                        <li @click="hideTables = !hideTables" :class="{'rotate': hideTables}" class="hide_tables_icon el-icon-arrow-down"></li>
                        <li @click="showTables = !showTables" :class="{'rotate': showTables}" v-show="!hideTables" class="detail_tables_icon el-icon-arrow-up"></li>
                    </ul>
                    <div class="table_panel">
                        <!--信审备注-->
                        <audit-marks
                            :update-type="updateTableType"
                            @updateOver="updateTable('')"
                            v-show="tabName === 'auditMarks'">
                        </audit-marks>

                        <!--信审结论-->
                        <audit-records
                            :update-type="updateTableType"
                            @updateOver="updateTable('')"
                            v-show="tabName === 'auditRecords'">
                        </audit-records>

                        <!--OC码-->
                        <audit-oc-code
                            :update-type="updateTableType"
                            @updateOver="updateTable('')"
                            v-show="tabName === 'ocCode'">
                        </audit-oc-code>

                        <!--SPC码-->
                        <!--<audit-spc-code-->
                            <!--:update-type="updateTableType"-->
                            <!--@updateOver="updateTable('')"-->
                            <!--v-show="tabName === 'auditSpcCode'">-->
                        <!--</audit-spc-code>-->

                        <!--照会记录-->
                        <tv-records
                            :update-type="updateTableType"
                            @updateOver="updateTable('')"
                            v-show="tabName === 'tvRecords'">
                        </tv-records>
                    </div>
                </div>
            </div><!--照会记录/信审备注/信审结论end-->
        </div>
        <!--信审操作面板-->
        <div v-if="orderId && orderId !== 'null'" class="operation_panel">
            <audit-panel
                @updateTable="updateTable"
                :show-panel="auditPanelShow">
            </audit-panel>
        </div>

        <!--挂断通话-->
        <div v-if="isCalling" @click="OnHungUp" class="hangup"><p>{{ $t('common.hangUp') }}</p><p class="tip">{{ $t('common.plsDontRefresh') }}</p></div>
        <!--文件上传中-->
        <div v-if="isUploading === 'uploading'" class="uploading"><p>{{ $t('common.fileUploading')}}</p></div>
        <!--文件上传成功-->
        <div v-if="isUploading === 'success'" class="uploading"><p>{{ $t('common.uploadSuccess')}}</p></div>
    </div>
</template>

<script>
    import detailNav from './detail-menu';
    import personalInfo from './personal-info';
    import contactsInfo from './contacts-info';
    import otherInfo from './other-info';
    import loanHistory from './loan-history';
    import auditMarks from './audit-marks';
    import auditRecords from './audit-records';
    import tvRecords from './tv-records';
    import auditOcCode from './audit-oc-code';
    import auditSpcCode from './audit-spc-code';
    import auditPanel from './audit-panel';
    import workStudent from './work-student';
    import modifyRecords from './modify-records';

    let that = null;
    var webSocket = new WebSocket('ws://127.0.0.1:8555/api');
    var timer;
    webSocket.onerror = function (event) {
        //alert(event.data);
        //that.$message.error(that.$t('common.plsOpenDevice'));
    };
    webSocket.onclose = function (event) {
        webSocket = new WebSocket('ws://127.0.0.1:8555/api');
        clearInterval(timer);
    };
    //与WebSocket建立连接
    webSocket.onopen = function (event) {
        timer = setInterval(that.HeartBeatCheck, 10000);
        //document.getElementById('messages').innerHTML += '<br />与服务器端建立连接';
    };
    //处理服务器返回的信息
    webSocket.onmessage = function (event) {
        const eData = JSON.parse(event.data);
        console.log(eData);
        if(eData.type && eData.type === 'CallRecord') {
            console.log('获取通话记录');
            console.log(eData.dynamicdata);
            that.isCalling = false;
            that.$storage.set('callIsCalling',false);
            if(eData.dynamicdata.type === 0 && (that.callOrder && that.callOrder == that.callCid)) {// 排除呼入
                if(!that.isConnected) {
                    console.log('没有录音直接上传通话记录');
                    that.uploadCallDetail(eData.dynamicdata,'record');// 没有录音直接上传通话记录
                }
                else {
                    console.log('有录音先本地保存通话记录');
                    that.uploadCallDetail(eData.dynamicdata,'save');// 有录音先本地保存通话记录
                }
            }
        }
        if(eData.data) {
            //console.log(eData.data);
            if(eData.data.invoke_command === 'Dial' && eData.data.state) {// 拨打了
                console.log('拨打了');
                that.callCid = that.getUUid();
                that.callOrder = that.callCid;
                that.isCalling = true;
                that.$storage.set('callCallCid',that.callCid);
                that.$storage.set('callIsCalling',true);
                that.recordpath = '';
                that.isConnected = false;
                that.dynamicdata = '';
                that.isUploading = '';
                that.$storage.set('callIsConnected',false);
                that.$storage.set('callRecordpath','');
            }
            if(eData.data.invoke_command === 'Dial' && eData.data.state === false) {// 拨打中
                that.$message.error(that.$t('common.calling'));
            }
            if(eData.data.invoke_command === 'StopRecord' && eData.data.state) {// 录音成功
                console.log('录音成功，文件地址：' + eData.dynamicdata.recordpath);
                that.recordpath = eData.dynamicdata.recordpath;
                if(eData.dynamicdata.recordpath) {
                    that.$storage.set('callRecordpath',that.recordpath);
                    that.uploadCallDetail('','uploadFile');
                }
            }
            if(eData.data.invoke_command === 'UploadFile') {// 上传文件成功
                console.log('上传文件成功');
                console.log(eData.data);
                if(eData.data.state) {
                    that.isUploading = 'success';
                    setTimeout( () => {
                        that.isUploading = '';
                    },1000);
                    that.callCid = '';
                    that.isConnected = false;
                    that.recordpath = '';
                    that.callOrder = '';
                    that.$storage.set('callCallCid','');
                    that.$storage.set('callIsConnected',false);
                    that.$storage.set('callRecordpath','');
                }
                else if(eData.data.state === false) {
                    that.isUploading = '';
                    that.callCid = '';
                    that.isConnected = false;
                    that.recordpath = '';
                    that.callOrder = '';
                    that.$storage.set('callCallCid','');
                    that.$storage.set('callIsConnected',false);
                    that.$storage.set('callRecordpath','');
                }
            }
        }
        if(eData.type && eData.type === 'RealTimeState') {
            let dynamicdata = eData.dynamicdata;
            if(dynamicdata && dynamicdata.realtimestate === 'outconnected' && (that.callOrder && that.callOrder == that.callCid)) {// 呼出接通
                console.log('呼出接通');
                that.isConnected = true;
                that.$storage.set('callIsConnected',true);
                that.OnStartRecord();
            }
            if(dynamicdata && dynamicdata.realtimestate === 'hangup' && that.isConnected && (that.callOrder && that.callOrder == that.callCid)) {// 挂机后结束录音
                console.log('挂断');
                that.OnStopRecord();
            }
        }
    };

    export default {
        name: 'audit-orderManage-telDetail',
        props: {
            auditPanelShow: {
                type: Boolean,
                default: true
            }
        },
        components: {
            detailNav,
            personalInfo,
            contactsInfo,
            otherInfo,
            loanHistory,
            auditMarks,
            auditRecords,
            tvRecords,
            auditPanel,
            auditOcCode,
            auditSpcCode,
            workStudent,
            modifyRecords
        },
        data() {
            return {
                user: this.$storage.get('user'),
                userId: this.$storage.get('userId'),
                orderId: '',
                tabName: 'tvRecords', // 照会记录，信审备注，信审结论 标签页切换
                showTables: false, // 上拉展示更多数据，照会记录，信审备注，信审结论
                hideTables: false, // 隐藏表格
                refsOffsetTop: [], // 个人信息等模块offsetTop集合
                activeMenu: 'personalInfo', // 激活的菜单
                menuClick: false, // 是否是菜单点击事件
                data: {
                    personalInfo: {
                        userPhone: '',
                        realName: '',
                        sex: '',
                        birthDay: '',
                        district: '',
                        province: '',
                        townCity: '',
                        address: '',
                        education: '',
                        civilStatus: '',
                        childrenNumber: '',
                        salary: '',
                        email: '',
                        phone: '',
                        identificationType: '',
                        cardId: '',
                        phoneList: '',// 匹配通讯录昵称
                        religion: '',
                        cardPositiveImg: '',
                        cardImg: '',
                        faceValid: '',// 活体检测结果
                        faceValidImg: '',// 活体照片
                        frontOfIdImg: '',
                        socialAccount: '',
                        socialAccountType: '',
                        lastName: '',
                        firstName: '',
                        middleName: ''
                    },
                    workStudentInfo: {
                        jobType: '',
                        companyName: '',
                        district: '',
                        province: '',
                        city: '',
                        address: '',
                        position: '',
                        companyTel: '',
                        payCycle: '',
                        payDay: '',
                        payImg: '',
                        workerImg: '',
                        salary: '',
                        employeeIdImg: '',
                        businessLicenseImg: '',
                        appName: '',
                        domain: '',
                        company: '',
                    },
                    contactsInfo: {
                        phone: '',
                        contactFirst: '',
                        relationshipFirst: '',
                        phoneFirst: '',
                        contactSecond: '',
                        relationshipSecond: '',
                        phoneSecond: '',
                        contactThree: '',
                        phoneThree: '',
                        relationshipThree: '',
                        contactFour: '',
                        phoneFour: '',
                        relationshipFour: '',
                        contactFive: '',
                        phoneFive: '',
                        relationshipFive: '',
                        companyTel: '',
                        phoneFirstList: '',// 匹配通讯录昵称
                        phoneSecondList: '',// 匹配通讯录昵称
                    },
                    otherInfo: {
                        accountList: [],
                        philHealthImg: '',
                        pagibigImg: '',
                        orcImg: '',
                        owwaImg: '',
                        tinImg: '',
                        driverImg: '',
                        auditSupplementaryImgOne: '',
                        auditSupplementaryImgTwo: '',
                        auditSupplementaryImgThree: '',
                        othersImg: ''
                    },
                    userBioassayInfo: {}
                }, // 用户信息
                updateTableType: '',
                isCalling: false,// 是否通话中
                recordpath: this.$storage.get('callRecordpath'),// 录音文件路径
                isConnected: this.$storage.get('callIsConnected'),// 电话是否接通过
                callCid: this.$storage.get('callCallCid'),
                dynamicdata: '',// 通话记录数据
                isUploading: '',// 正在上传
                callOrder: '',
                isAuditing: false, // 是否处于信审中
            };
        },
        methods: {
            getUserInfo(type) {
                // 获取用户信息
                const params = {
                    id: this.userId,
                    orderId: this.orderId
                };
                this.$api.customer.findUserInfo(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        const {
                            userInfo,
                            userBaseInfo,
                            userContactsInfo,
                            userCardInfo,
                            userJobInfo,
                            userAccountInfo,
                            userAccountList,
                        } = data;
                        if ('personalInfo' === type) {
                            // 如果是基本信息修改，只做基本信息变动
                            this.data.personalInfo.realName = userBaseInfo.realName; // 姓名
                            this.data.personalInfo.firstName = userBaseInfo.firstName; // 姓名
                            this.data.personalInfo.middleName = userBaseInfo.middleName; // 姓名
                            this.data.personalInfo.lastName = userBaseInfo.lastName; // 姓名
                            return;
                        }
                        this.mergeData(this.data.personalInfo, userBaseInfo);
                        this.mergeData(this.data.personalInfo, userCardInfo);
                        this.mergeData(this.data.personalInfo, {'userPhone': userInfo.phone});
                        this.mergeData(this.data.contactsInfo, userContactsInfo);
                        this.mergeData(this.data.contactsInfo, userJobInfo);
                        this.mergeData(this.data.contactsInfo, {'phone': userInfo.phone});
                        this.mergeData(this.data.workStudentInfo, userJobInfo, type === 'work-info');
                        this.mergeData(this.data.workStudentInfo, userCardInfo);
                        this.mergeData(this.data.otherInfo, userBaseInfo);
                        this.mergeData(this.data.otherInfo, userCardInfo);
                        this.mergeData(this.data.otherInfo, userAccountInfo);
                        if (userAccountList) {
                            this.mergeData(this.data.otherInfo, {'accountList': userAccountList});
                        }
                        this.getMatchNickName(userInfo.phone,userContactsInfo);
                        if (userAccountInfo instanceof Object) {
                            userAccountInfo.current = true;
                            this.data.otherInfo.accountList.unshift(userAccountInfo);
                        }
                    }
                });
            },
            scrollTo(module) {
                // scroll to module
                const panelTop = this.$refs.panelList.offsetTop;
                const moduleTop = this.$refs[module].$el.offsetTop;
                this.$refs.panelList.scrollTop = moduleTop - panelTop;
                this.menuClick = true;
            },
            calcOffsetTop() {
                // calculate modules offsetTop
                const panelEle = this.$refs.panelList;
                const panelTop = panelEle.offsetTop;
                Object.keys(this.$refs).forEach((ref) => {
                    if (ref !== 'panelList') {
                        const nextEleSibling = this.$refs[ref].$el.nextElementSibling;
                        this.refsOffsetTop.push({
                            module: ref,
                            offsetTop: this.$refs[ref].$el.offsetTop - panelTop,
                            nextOffsetTop: nextEleSibling ? (nextEleSibling.offsetTop - panelTop) : -1
                        });
                    }
                });
            },
            scrollEvent(e) {
                // listening panel scroll event
                if (this.menuClick) {
                    // 防止震荡
                    this.menuClick = false;
                    return;
                }
                const ele = e.target || e.srcElement;
                this.refsOffsetTop.forEach((module) => {
                    if (module.nextOffsetTop != -1 && module.offsetTop <= ele.scrollTop && module.nextOffsetTop > ele.scrollTop) {
                        this.activeMenu = module.module;
                    } else if (module.nextOffsetTop == -1 && module.offsetTop <= ele.scrollTop) {
                        this.activeMenu = module.module;
                    }
                });
            },
            mergeData(target, source, overwrite) {
                // 合并数据
                if (!source || typeof source !== 'object') {
                    return;
                }
                Object.keys(target).forEach((key) => {
                    if (overwrite && (source[key] || source[key] === 0)) {
                        // 数据覆盖
                        target[key] = source[key];
                    } else if (!target[key] && (source[key] || source[key] === 0)) {
                        target[key] = source[key];
                    } else if (target[key] instanceof Array && target[key].length === 0 && source[key]) {
                        target[key] = source[key];
                    }
                });
            },
            updateTable(val) {
                this.updateTableType = val;
            },
            getMatchNickName(phone,userContactsInfo) {
                let params = {
                    userId: this.userId,
                    phone: phone,
                    phoneFirst: (userContactsInfo && userContactsInfo.phoneFirst) ? userContactsInfo.phoneFirst : '',
                    phoneSecond: (userContactsInfo && userContactsInfo.phoneSecond) ? userContactsInfo.phoneSecond : '',
                };
                this.$api.audit.matchAdressBookName(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.data.personalInfo.phoneList = data.phoneList;
                        this.data.contactsInfo.phoneFirstList = data.phoneFirstList;
                        this.data.contactsInfo.phoneSecondList = data.phoneSecondList;
                    }
                });
            },
            HeartBeatCheck() {
                //console.log('webSocket:' + JSON.stringify(webSocket));
                webSocket.send('HeartBeatData');
            },
            // 拨打
            OnDailout(number) {
                console.log(number);
                const re = /^[0-9]{7,16}$/;
                if(!re.test(number)) {
                    this.$message.error(this.$t('verify.plsCallRightNumber'));
                    return;
                }
                webSocket.send('{"command":"Dial","arguments":{"phone":"'+ number +'"}}');
            },
            // 挂断
            OnHungUp() {
                webSocket.send('{"command":"HungUp"}');
            },
            // 开始录音
            OnStartRecord() {
                webSocket.send('{"command":"StartRecord"}');
            },
            // 结束录音
            OnStopRecord() {
                webSocket.send('{"command":"StopRecord","arguments":{"isconverttomp3":"true"}}');
            },
            // 上传文件
            OnUploadFile(params) {
                if(params) {
                    const orderId = params.orderId;
                    const url = this.$apiConf.baseUrl + this.$apiConf.urlType.operation.uploadsoundRecord;
                    const starttime = params.callStartTime;
                    const callCid = params.callCid;
                    console.log('上传文件starttime：' + starttime);
                    console.log('上传文件地址为：' + this.recordpath);
                    var sendJson = '{"command":"UploadFile","arguments":{"url":"'+url+'","file":"'+this.recordpath+'","diykey":"orderId,callStartTime,callCid","diyvalue":"'+orderId+','+starttime+','+callCid+'"}}';
                    console.log(sendJson);
                    webSocket.send(sendJson);
                }
            },
            // 上传通话记录
            uploadCallDetail(dynamicdata,type) {
                if(dynamicdata) this.dynamicdata = dynamicdata;
                if(type === 'save' || (type === 'uploadFile' && !this.dynamicdata) || !this.callCid) {
                    return
                }
                console.log('调上传通话记录接口');
                this.isUploading = 'uploading';
                const user = this.user;
                const params = {
                    callCid: this.callCid,
                    callStartTime: this.dynamicdata.starttime,
                    answertime: this.dynamicdata.answertime,
                    endtime: this.dynamicdata.endtime,
                    orderId: this.orderId,
                    skillTypeId: user.skillTypeId,
                    operatorId: user.id,
                    operatorName: user.username,
                    callPhone: this.dynamicdata.number,
                    type: this.dynamicdata.state,
                    soundRecord: this.isConnected ? 1 : 0,
                };
                this.$api.operation.insertcallrecord(params).then(res => {
                    if(type === 'record') {
                        this.isUploading = 'success';
                        setTimeout( () => {
                            this.isUploading = '';
                        },1000);
                        this.callCid = '';
                        this.callOrder = '';
                        this.$storage.set('callCallCid','');
                    }
                    else if(type === 'uploadFile') {
                        this.OnUploadFile(params);
                    }
                }).catch((error) => {
                    this.isUploading = '';
                    this.isCalling = false;
                    this.callCid = '';
                    this.isConnected = false;
                    this.recordpath = '';
                    this.callOrder = '';
                    this.$storage.set('callIsCalling',false);
                    this.$storage.set('callCallCid','');
                    this.$storage.set('callIsConnected',false);
                    this.$storage.set('callRecordpath','');
                });
            },
            getUUid() {
                var d = new Date().getTime();
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = (d + Math.random()*16)%16 | 0;
                    d = Math.floor(d/16);
                    return (c=='x' ? r : (r&0x3|0x8)).toString(16);
                });
                return uuid
            },
            // 更新信审状态
            updateAudit(val) {
                this.isAuditing = val;
            },
        },
        mounted() {
            this.calcOffsetTop();
        },
        created() {
            that = this;
            if (this.$route.params.id) {
                this.userId = this.$route.params.id;
                this.orderId = this.$route.params.orderId;
            }
            this.getUserInfo();
        }
    };
</script>
<style lang="scss">
    @import "~@/assets/scss/function";

    [data-page=audit-orderManage-telDetail] {
        .content {
            display: flex;
            flex-direction: column;
        }
        .left_menu {
            display: none;
        }
        .telMatch .red_color {
            color: #FF4949;
        }
        .telMatch .el-pagination {
            text-align: right;
        }
        .break-info {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .audit-upload.upload_image .upload .img_desc {
            height: 0;
            line-height: 0;
        }
        .audit-upload.upload_image {
            text-align: left;
        }
        .audit-upload span {
            margin: 4px 0;
            display: inline-block;
            font-size: 12px;
        }
        .sms .el-dialog__body {
            padding-bottom: 40px;
        }
        .telSearch {
            width: 20%;
        }
        .detail_module_panel {
            padding: 0 12px;
        }
        .detail_panel_title_icon {
            background-repeat: no-repeat;
            background-position: left center;
            background-size: 20px 20px;
        }
        .detail_panel_title {
            padding-left: 32px;
            margin: 0;
            font-size: 14px;
            height: 52px;
            line-height: 52px;
            border-bottom: 1px solid $colorSplit;
        }
        .panel_info_content {
            padding: 20px 0;
            .row {
                margin-bottom: 12px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
            .label {
                color: #a6a8aa;
                font-size: 12px;
                text-align: right;
                padding: 0 8px;
            }
            .info {
                font-size: 12px;
                padding: 0 8px;
            }
            .imgs {
                li {
                    display: inline-block;
                    width: 200px;
                    margin-right: 24px;
                    border: 1px solid $colorSplit;
                    border-radius: 8px;
                    overflow: hidden;
                    a {
                        display: block;
                        height: 112px;
                        width: 100%;
                        background-color: #e5e5e5;
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: cover;
                    }
                    .img_desc {
                        height: 32px;
                        line-height: 32px;
                        padding: 0 16px;
                    }
                }
            }
        }
        .panel_info_content_title {
            color: #5e6061;
            font-size: 14px;
            .dot {
                display: inline-block;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #5e6061;
                margin-right: 10px;
                margin-bottom: 2px;
            }
        }
        // 历史贷款信息列表
        .loan_history_table {
            th {
                background-color: #f4f5f6;
            }
        }
        // 个人信息icon
        .personal_info_icon {
            background-image: url("~@/assets/img/icon_personal_info.png");
        }
        // 工作/学生信息icon
        .work_student_icon {
            background-image: url("~@/assets/img/icon_work_student.png");
        }
        // 材料信息icon
        .other_info_icon {
            background-image: url("~@/assets/img/icon_other_info.png");
        }
        // 联系人icon
        .contacts_icon {
            background-image: url("~@/assets/img/icon_contacts.png");
        }
        // 历史贷款信息icon
        .loan_history_icon {
            background-image: url("~@/assets/img/icon_personal_info.png");
        }

        // 操作面板
        .audit_panel {
            .el-select {
                width: 100%;
            }
            .el-form-item__label {
                font-size: 12px;
                line-height: 17px;
                color: #a6a8aa;
                padding-bottom: 8px;
            }
            .el-form-item {
                margin-bottom: 16px;
            }
        }

        .btn-call {
            cursor: pointer;
            color:#47c5b2;
            background: none;
            border:none;
            text-align: left;
            padding:0px;
        }
        .btn-call:disabled {
            cursor: default;
            color:#303333;
        }
    }
</style>
<style lang="scss" scoped>
    @import "~@/assets/scss/function";

    .audit_detail {
        display: flex;
        height: 100%;
        width: 100%;
    }

    .content_panel {
        flex: 1;
        padding: 16px 16px 0;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .operation_panel {
        width: 360px;
        background-color: #fff;
        /*padding: 16px;*/
        overflow: auto;
        box-shadow: -1px 0 4px 0 rgba(0, 0, 0, 0.05);
    }

    .panel_list {
        background-color: #fff;
        flex: 1;
        overflow: auto;
    }

    .placeholder {
        height: 212px;
        position: relative;
        margin: 0 -16px 0;
        overflow: visible;
    }

    .tables {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: $colorBg;
        height: 500px;
    }

    .tabs {
        background-color: $primary;
        position: relative;
        li {
            display: inline-block;
            a {
                color: rgba(255, 255, 255, 0.6);
                display: block;
                padding: 0 24px;
                height: 44px;
                line-height: 44px;
                position: relative;
                &.active {
                    color: #fff;
                    .detail_menu_icon {
                        display: block;
                    }
                }
                .detail_menu_icon {
                    display: none;
                    position: absolute;
                    bottom: -7px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 20px;
                    color: #f4f5f6;
                }
            }
        }
        .detail_tables_icon, .hide_tables_icon {
            position: absolute;
            top: 0;
            right: 0;
            height: 44px;
            line-height: 44px;
            width: 56px;
            color: #fff;
            font-size: 25px;
            cursor: pointer;
            text-align: center;
            &.rotate {
                transform: rotate(180deg);
            }
        }
        .hide_tables_icon {
            right: 70px;
        }
    }

    .table_panel {
        /*margin: 0 16px;*/
    }
    .hangup {
        display: block;
        width:220px;
        background: #fefefe url(~@/assets/img/hangup.png) no-repeat left 10px center;
        background-size: 40px 40px;
        position: fixed;
        left:20px;
        top:180px;
        border:1px solid #ddd;
        border-radius: 20px;
        line-height:18px;
        padding:5px 5px 5px 55px;
        font-size: 18px;
        cursor: pointer;
        .tip {
            font-size:14px;
        }
    }
    .uploading {
        position: fixed;
        background: rgba(0,0,0,.5);
        left:0px;
        top:0px;
        right:0px;
        bottom:0px;
        z-index: 999;
        p {
            display: block;
            position: fixed;
            background: #FFF;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 18px;
            width:400px;
            line-height:30px;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        }
    }
</style>
